/*
 * @Author: hongbin
 * @Date: 2022-09-21 16:46:54
 * @LastEditors: hongbin
 * @LastEditTime: 2022-09-21 19:09:10
 * @Description:全局加载器
 */
import { createRef, FC, useImperativeHandle, useRef, useState } from "react";
import styled, { keyframes } from "styled-components";

interface IShowLoader {
    (): void;
}

interface LoaderRef {
    showLoader: IShowLoader;
    hideLoader: IShowLoader;
}

const ref = createRef<LoaderRef>();

/**
 * 顶层加载器
 */
export const loader = {
    show: () => {
        ref.current?.showLoader();
    },
    hide: () => {
        ref.current?.hideLoader();
    },
};

interface IProps {}

const Loader: FC<IProps> = () => {
    const [isShow, _setIsShow] = useState(false);

    useImperativeHandle(
        ref,
        () => ({
            showLoader: () => {
                _setIsShow(true);
            },
            hideLoader: () => {
                _setIsShow(false);
            },
        }),
        [_setIsShow]
    );

    return (
        <Container isShow={isShow}>
            <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8839"
                width="256"
                height="256"
            >
                <path
                    d="M486.4 102.4a25.6 25.6 0 1 1 51.2 0v170.666667a25.6 25.6 0 1 1-51.2 0V102.4z m208.213333 42.0864a25.6 25.6 0 0 1 44.373334 25.6l-85.333334 147.797333a25.6 25.6 0 0 1-44.373333-25.6l85.333333-147.797333z m159.300267 140.526933a25.6 25.6 0 0 1 25.6 44.373334l-147.797333 85.333333a25.6 25.6 0 0 1-25.6-44.373333l147.797333-85.333334zM921.6 486.4a25.6 25.6 0 1 1 0 51.2h-170.666667a25.6 25.6 0 1 1 0-51.2h170.666667z m-42.0864 208.213333a25.6 25.6 0 1 1-25.6 44.373334l-147.797333-85.333334a25.6 25.6 0 0 1 25.6-44.373333l147.797333 85.333333z m-140.526933 159.300267a25.6 25.6 0 0 1-44.373334 25.6l-85.333333-147.797333a25.6 25.6 0 0 1 44.373333-25.6l85.333334 147.797333zM537.6 921.6a25.6 25.6 0 1 1-51.2 0v-170.666667a25.6 25.6 0 1 1 51.2 0v170.666667z m-208.213333-42.0864a25.6 25.6 0 1 1-44.373334-25.6l85.333334-147.797333a25.6 25.6 0 0 1 44.373333 25.6l-85.333333 147.797333zM170.0864 738.986667a25.6 25.6 0 0 1-25.6-44.373334l147.797333-85.333333a25.6 25.6 0 0 1 25.6 44.373333l-147.797333 85.333334zM102.4 537.6a25.6 25.6 0 1 1 0-51.2h170.666667a25.6 25.6 0 1 1 0 51.2H102.4z m42.0864-208.213333a25.6 25.6 0 0 1 25.6-44.373334l147.797333 85.333334a25.6 25.6 0 0 1-25.6 44.373333l-147.797333-85.333333zM285.013333 170.0864a25.6 25.6 0 1 1 44.373334-25.6l85.333333 147.797333a25.6 25.6 0 0 1-44.373333 25.6l-85.333334-147.797333z"
                    p-id="8840"
                    fill="#97ff9e"
                ></path>
            </svg>
        </Container>
    );
};

export default Loader;

const rotate = keyframes`
    0%{transform:rotate(0deg) scale(0.5);}
    50%{transform:rotate(360deg) scale(1);}
    100%{transform:rotate(720deg) scale(0.5);}
`;

const Container = styled.div<{ isShow: boolean }>`
    opacity: ${({ isShow }) => +isShow};
    visibility: ${({ isShow }) => (isShow ? "visible" : "hidden")};
    transition-property: opacity, visibility;
    transition-duration: 0.4s;
    z-index: 99999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000077;
    backdrop-filter: blur(12px);

    & > svg {
        animation: ${rotate} 4s linear;
        animation-iteration-count: infinite;
        width: 10vmax;
        height: 10vmax;
    }
`;
